/**
 * Created by Wing on 2017/5/27.
 */
var request = getRequest();
var deckId = request["deckId"];
var noteTypeId = request["noteTypeId"];
var mynoteType;
$(function () {
//            console.log(id);

    $.getJSON(
        "/memorypalace/notetype/getnotetypebyid.action?noteTypeId=" + noteTypeId,
        function (noteType) {
            mynoteType = noteType;
            // 1.读取当前笔记类型的名称
            $("#noteTypeNameLi").html("笔记类型:" + noteType.noteTypeName);
            // 2.修改标签页名称和个数
            $("#navUl>li[role=presentation]").remove();
            var ulWidth = parseInt($("#navUl").css("width"));
            var liWidth = 0;
            $.each(noteType.cardStyleList, function (i, cardStyle) {
                var h;
                if (i == 0) {
                    // 第一个默认是active的
                    h =
                        '<li role="presentation" id="cardStyleLi' + i + '" class="active">' +
                        '   <a>' +
                        '<span id="span' + i + '" ondblclick="spanOnDBClick(this)">' + cardStyle.cardStyleName + '</span>' +
                        '<input id="input' + i + '" style="display: none" onblur="titleOnBlur(this)" value="' + cardStyle.cardStyleName + '">' +
                        '   </a>' +
                        '</li>';
                } else {
                    h = '<li role="presentation" id="cardStyleLi' + i + '">' +
                        '   <a id="cardStyleA'+i+'" href="javascript:showNoteAndCard(' + i + ')">' + cardStyle.cardStyleName + '</a>' +
                        '</li>';
                }
                $("#navUl").append(h);

                liWidth += parseInt($("li[role=presentation]:last-child").css("width"));
            });
//                    $("li[role=presentation]:first-child").css({"margin-left":(ulWidth-liWidth)/2+"px"});
            $(".deleteBtn").click(deleteCardStyle);
            showNoteAndCard(0);
        })

});
var currentIndex = 0;
var beforeIndex;
// 显示源代码和预览
var showNoteAndCard = function (index) {
    // 如果有以前的,把以前的样式取消掉
    if (beforeIndex != undefined) {
        // 之前有选中
        var cardStyleLi = $("#navUl>.active");
        // var cardStyleLiId = $(cardStyleLi).attr("id");
        // 之前活跃的id
        // var beforeIndex = cardStyleLiId.replace("cardStyleLi", "");
        var str = $("#input" + beforeIndex).val();
        $(cardStyleLi).removeClass("active");
        $(cardStyleLi).html('<a href="javascript:showNoteAndCard(' + beforeIndex + ')">' + str + '</a>');
    }
        beforeIndex = index;

    // 给当前的添加标签页样式
    var str = mynoteType.cardStyleList[index].cardStyleName;
    var li = $("#cardStyleLi"+index);
    li.html(
        '<a>' +
        '   <span id="span' + index + '" ondblclick="spanOnDBClick(this)">' + str + '</span>' +
        '   <input id="input' + index + '" style="display: none" onblur="titleOnBlur(this)" value="' + str + '">' +
        '</a>'
    );
    li.addClass("active");
    currentIndex = index;
    var cardStyles = mynoteType.cardStyleList;
    var currentShow = cardStyles[currentIndex];
    var htmlFront = currentShow.frontHTML; //正面
    var htmlBack = currentShow.backHTML; //反面
    var css = currentShow.css;//样式


    // 引用
    var areaNames = JSON.parse(mynoteType.areaNames);
    var htmlFront0 = htmlFront;
    var htmlBack0 = htmlBack;
    $.each(areaNames, function (i, areaName) {
        var reg = new RegExp("{{" + areaName + "}}", "g");
        htmlFront0 = htmlFront0.replace(reg, "(" + areaName + ")");
        htmlBack0 = htmlBack0.replace(reg, "(" + areaName + ")");
    });
    htmlFront0 = htmlFront0.replace(/{{(.*?)}}/g, "(未知区域$1)");
    htmlBack0 = htmlBack0.replace(/{{(.*?)}}/g, "(未知区域$1)");
    $("#showFront").html(htmlFront0);
    $("#showBack").html(htmlBack0);
    $("#cardCss").html(css);

    // 源代码
    setTimeout(function () {
        $("#front").val(htmlFront);
        $("#back").val(htmlBack);
        $("#css").html(css);
    }, 100);

};

// 显示预览,预览更新后会提交编辑的action
var previewTheCard = function () {
    // 引用
    var areaNames = JSON.parse(mynoteType.areaNames);
    var htmlFront0 = $("#front").val();
    var htmlBack0 = $("#back").val();
    var css = $("#css").html();
    $.each(areaNames, function (i, areaName) {
        var reg = new RegExp("{{" + areaName + "}}", "g");
        htmlFront0 = htmlFront0.replace(reg, "(" + areaName + ")");
        htmlBack0 = htmlBack0.replace(reg, "(" + areaName + ")");
    });
    htmlFront0 = htmlFront0.replace(/{{(.*?)}}/g, "(未知区域$1)");
    htmlBack0 = htmlBack0.replace(/{{(.*?)}}/g, "(未知区域$1)");
    $("#showFront").html(htmlFront0);
    $("#showBack").html(htmlBack0);
    $("#cardCss").html(css);

    editCardStyle();
};
var change0 = function (id) {
    previewTheCard();
};
var deleteCardStyle = function () {
    var li = $(".active[role=presentation]");
    var index = $(li).attr("id").replace("cardStyleLi", "");
    var cardStyleId = mynoteType.cardStyleList[index].cardStyleId;
    if ($("li[role=presentation]").length > 1) {
        // 多于一个的卡片样式,就可以删除
        $.ajax({
            "url": "/memorypalace/cardstyle/deleteCardStyle.action",
            "data": {"cardStyleId": cardStyleId},
            "success": function () {
                // 成功之后
                li.remove();
                if(index != 0) {
                    showNoteAndCard(index - 1);
                }else{
                    showNoteAndCard(0);
                }
                showTip("删除成功!",undefined,true);
            },
            "error":function () {
                showTip("删除失败:网络出错",undefined,false);
            }
        });
    } else {
        // 只有一个卡片样式,不可以删除
        showTip("删除失败:至少有一个卡片样式", undefined, false);
    }
}
var addCardStyle = function () {
    // 1.页面上新增
    var indexForNew = mynoteType.cardStyleList.length;
    var h = '<li role="presentation" id="cardStyleLi' + indexForNew + '">' +

        '   <a id="cardStyleA'+indexForNew+'" href="javascript:showNoteAndCard(' + indexForNew + ')">' + 1 + '</a>' +
        '</li>';
    var newCardStyle = {
        "backHTML": "",
        "cardStyleId": "",
        "cardStyleName": "双击输入名称",
        "css": ".card {" +
        "   font-family: arial;" +
        "   font-size: 20px;" +
        "   text-align: center;" +
        "   color: black;" +
        "   background-color: white;" +
        "}",
        "frontHTML": "",
        "noteTypeId": mynoteType.noteTypeId
    };
    $.getJSON(
        "/memorypalace/cardstyle/addCardStyle.action",
        newCardStyle,
        function (cardStyleId) {
            newCardStyle[cardStyleId] = cardStyleId;
        }
    );
    mynoteType.cardStyleList.push(newCardStyle);
    // 2.跳转
    $("#navUl").append(h);
    showNoteAndCard(indexForNew);
    // 3.
};
var spanOnDBClick = function (span) {
    $(span).hide();
    var inputId = $(span).attr("id").replace("span", "input");
    $('#' + inputId).show();
    $('#' + inputId).focus();
    $('#' + inputId).select();
}
var titleOnBlur = function (input) {
    // 1.隐藏与显示
    $(input).hide();
    var spanId = $(input).attr("id").replace("input", "span");
    $('#' + spanId).show();
    // 2.传值
    $("#" + spanId).html($(input).val());
    // 3.提交编辑action
    editCardStyle();
}
var editCardStyle = function () {
    // beforeIndex

    // "backHTML": "",
    //     "cardStyleName": "双击输入名称",
    //     "css": ".card {" +
    //     "frontHTML": "",
    var name = $("#cardStyleA"+beforeIndex).html();
    if(name == undefined){
        name = $("#input"+beforeIndex).val();
    }
    var htmlFront = $("#front").val();
    var htmlBack = $("#back").val();
    var css = $("#css").html();
    var currentCardStyle = mynoteType.cardStyleList[beforeIndex];
    currentCardStyle.frontHTML = htmlFront;
    currentCardStyle.frontBack = htmlBack;
    currentCardStyle.css = css;
    currentCardStyle.cardStyleName = name;

}